<template>
  <view class="fixed-danmu-wrapper" :style="{'top':'0'}" >
    <view class="danmu-wrapper" >
      <view class="danmu-list">
        <view class="danmu-item-abs" v-for="(item,index) in commentArrList" :key="index"
            :style="{
              'animation-delay':item.delay + 's',
              'top':item.top,
            }"
        >
        <view
        class="danmu-item"
        :style="{
          'background':bg,
          'color':color,
        }"
        >
          {{item.text}}
        </view>
          
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {shuffleArray} from '@/common/utils/util.js'
  const appData = getApp();
  let timmer = null;
  export default{
    props:{
      bg:{
        type:String,
        default:'rgba(48,99,189,0.76)'
      },
      color:{
        type:String,
        default:'#fff'
      }
    },
    data(){
      return{
        // fixedTop: appData.globalData.topHeight * 2,
        commentArr:[
          "他说我智商140！我觉得测的很准！",
          "好难，一测一个不吱声，我不会是笨蛋吧。",
          "测评很科学，结果很精准。",
          "智力挑战，燃爆我的大脑！",
          "智商测评，边玩边学，两不误！",
          "这智商测试完全是给我的大脑做了个SPA！",
          "感觉自己是笨蛋的事实要藏不住了。。。",
          "测测智商，感觉自己又行了！",
          "这测评，绝了，智商飙升！",
          "测试一下，看看大脑有多灵光。"
        ],
        commentArrList:[],
      }
    },
    mounted(){
      this.commentArrList = shuffleArray(this.commentArr).map((item, index) => {
        index = index +1
        // 分配 top 值，假设三条赛道：30px, 110px, 190px
        const trackHeights = ['30rpx', '110rpx', '190rpx'];
        const top = trackHeights[index % trackHeights.length];
        
        // 基数随弹幕数量递增
        const baseDelay = Math.floor(index / 3) * 3;
        // 生成延迟时间，延迟在 baseDelay 到 baseDelay + 3 秒之间
        const delay = baseDelay + Math.random() * 3;
        
        return {
          text: item,
          delay: delay,  // 随机延迟
          top: top       // 分配赛道
        };
      });
    }
  }
</script>

<style lang="scss" scoped>
  @keyframes toLeft {
    0% {
      left:100vw;
    }
  
    100% {
      left:-100vw;
    }
  }
  .fixed-danmu-wrapper{
      position: absolute;
      // top: 50rpx;
      
      left: 0;
      right: 0;
      .danmu-wrapper{
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 300rpx;
        // background-color: red;
        .danmu-list{
          position: relative;  
          .danmu-item-abs{
            position: absolute;
            // top: 0;
            left: 100vw;
            
            animation-fill-mode: forwards;
            animation-name: toLeft;
            animation-duration: 5s;
            animation-timing-function:linear;
          }
          .danmu-item{
            color: #000;
            
            
            // transition: all 1.5s ease-in-out;
            
            height: 54rpx;
            line-height: 54rpx;
            padding: 0 14rpx;
            // background: rgba(48,99,189,0.76);
            border-radius: 27rpx;
            
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #FFFFFF;
            // text-align: center;
            font-style: normal;
            
            
            width: fit-content;
            min-width: fit-content;
            
            overflow: hidden;
          }
        }
      }
    }
  
</style>